<template>
<view class="view_container">
	<view class="search_container">
		<!-- <view class="type_bt">
			<SelectTypeCp
				v-model="query.type"
				@onChange="getData(1)">
			</SelectTypeCp>
		</view> -->
		<u-search
			class="u-search"
			placeholder="请输入关键字" 
			v-model="query.selStr"
			shape="square"
			:height="90"
			:clearabled="true"
			:show-action="false"
			@search="getData(1)"
			@clear="getData(1)">
		</u-search>
	</view>
	<SummeryItemCp
		v-for="(item,index) in dataList"
		:key="index"
		:itemData="item">
	</SummeryItemCp>
	<view class="add_bt" @click="goUpdatePage">
		<u-icon 
			name="plus"
			size="40"
			color="#ffffff">
		</u-icon>
	</view>
	<u-toast ref="uToast" />
</view>
</template>

<script>
//月度汇总页面
import SummeryItemCp from "@/components/summery/SummeryItem.vue";
import SelectTypeCp from "@/components/summery/SelectType.vue";
import {findSummarys} from "@/common/Api";
export default {
	name:"SummeryView",
	components:{SummeryItemCp,SelectTypeCp},
	data() {
		return {
			pageList:[],  //每一页对应的数据(二维数组)
			page:0,  //已请求的页数
			pageSize:15,
			query:{
				selStr:'',  //关键字搜索
				type:'',
			},
		};
	},
	computed:{
		dataList(){  //将二维pageList平铺
			let dataList = [];
			for(let item of this.pageList){
				if(item){
					dataList.push(...item);
				}
			}
			return dataList;
		},
	},
	onLoad(options){
		// let type = options?options.type:undefined;
		// if(type){
		// 	this.query.type = type;
		// }
		this.getData(1);  //默认获取第一页
	},
	created(){
		uni.$on('deleteSummery',(id)=>{  //当item被删除时触发
			for(let index in this.pageList){
				this.pageList[index] = this.pageList[index].filter(item=>{
					return item.id != id;
				});
			}
			this.pageList = [...this.pageList];
			this.$refs.uToast.show({
				title: '删除成功',
				type: 'success',
			})
		});
		uni.$on('addSummery',()=>{
			this.getData(this.page);  //获取当前页
			this.$refs.uToast.show({
				title: '添加成功',
				type: 'success',
			})
		});
		uni.$on('updateSummery',(data)=>{  //当item被修改时触发
			for(let index in this.pageList){
				this.pageList[index].forEach((item,_index)=>{
					if(item.id == data.id){
						this.pageList[index][_index] = data;
					}
				});
			}
			this.pageList = [...this.pageList];
			this.$refs.uToast.show({
				title: '修改成功',
				type: 'success',
			})
		});
	},
	onReachBottom(){  //滚动区域滚动到底部时获取下一页数据
		this.getData(this.page+1);
	},
	methods:{
		goUpdatePage(){  //跳转到修改界面
			uni.navigateTo({
			    url: `/pages/summery/updateSummery`,
			});
		},
		getData(page){
			uni.showLoading({
				title: '加载中'
			});
			findSummarys({
				page:page,
				size:this.pageSize,
				selStr:this.query.selStr,
			}).then(res=>{
				let data = res.data.data;
				if(!data.pageNum) return;
				this.page = data.pageNum;
				this.$set(this.pageList,this.page-1,data.list);  //索引必须是页数减一
				this.pageList.length = this.page;  //数组的长度必须和页数对应
			}).finally(()=>{
				uni.hideLoading();
			});
		},
	},
}
</script>

<style lang="scss" scoped>
.view_container{
	display: grid;
	grid-template-columns: 1fr;
	>.search_container{
		display: flex;
		align-items: center;
		padding: 10px 15px;
		box-sizing: border-box;
		background-color: #ffffff;
		position:sticky;
		top:0;
		z-index: 999;
		border-bottom: 1px solid #eaecef;
		>.type_bt{
			min-width: 90px;
			margin-right: 10px;
		}
		/deep/.u-search{
			width: 100%;
		}
	}
	>.add_bt{
		width: 60px;
		height: 60px;
		position: fixed;
		bottom: 30px;
		right: 15px;
		z-index: 9999;
		background-color: #007eff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}
}
</style>
